import styled from "@emotion/styled"
import { PageHeader } from "../../AccountPage/components/PageHeader"
import IframeLoadingMask from "../components/IframeLoadingMask"
import { useEffect, useMemo, useState } from "react"
import { Repository } from "@/atoms/api_repositories"

const RootContainer = styled.div`
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 44rem;
    position: fixed;
    top: 0;
    z-index: 10;
`

const Iframe = styled.iframe`
    width: 100%;
    height: 100;
    flex: 1;
    overscroll-behavior: contain;
    border: 1rem solid #eee;
`
const LoadingBlock = styled.div`
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    flex: 1;
    font-size: 30rem;
    text-align: center;
`

export default function Service() {
    const [isLoading, isLoadingSet] = useState(true)
    const { data: profile, fetch: fetchUserInfo, loading } = Repository.useUserInfo()
    useEffect(() => {
        if (!profile) {
            fetchUserInfo()
        }
    }, [profile, fetchUserInfo])

    // const profile = useProfile()

    // const iframeSrc = new URL(
    //     'https://secure.livechatinc.com/licence/15348909/open_chat.cgi',
    //   ).toString()
    const iframeSrc = useMemo(() => {
        const parameters = {
            name: [
                // profile?.data?.realName?.firstName,
                // profile?.data?.realName?.middleName,
                // profile?.data?.realName?.lastName,
                profile?.nickname,
            ].join(" "),
            email: profile?.email,
        }
        const url = new URL("https://secure.livechatinc.com/licence/15348909/open_chat.cgi")
        for (const key in parameters) {
            const _key = key as keyof typeof parameters
            url.searchParams.set(key, parameters[_key] ?? "")
        }
        return url.toString()
    }, [
        profile?.email,
        profile?.nickname,
        // profile.data?.realName?.firstName,
        // profile.data?.realName?.lastName,
        // profile.data?.realName?.middleName,
    ])

    return (
        <RootContainer>
            <PageHeader
                title="Customer Service"
                iconType="black-arrow"
                textColor="#131416"
                backgroundColor="#FFFFFF"
            />
            {isLoading && <LoadingBlock>Loading...</LoadingBlock>}
            <Iframe
                src={iframeSrc}
                onLoad={() => {
                    setTimeout(() => {
                        isLoadingSet(false)
                    }, 200)
                }}
            />

            {/* <IframeLoadingMask isLoading={isLoading} /> */}
            {/* <TabBar current="service" /> */}
        </RootContainer>
    )
}
